/*
Theme Name: VertiMagazine
Author: Codeinwp
Author URI: http://www.codeinwp.com
Theme URI: http://themes.codeinwp.com/themes/vertimagazine/
Description: VertiMagazine is a responsive WordPress Theme made for people who love beautiful typography.Along with the elegant design the theme is easily customizable with numerous theme options, for example you will be able to easily edit logo, menus.
Version: 1.0.7
Tags: red, blue, white, gray, two-columns,full-width-template, flexible-width, custom-menu, threaded-comments, sticky-post, theme-options, editor-style, light, right-sidebar
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

VertiMagazine is based on Underscores http://underscores.me/, (C) 2012-2013 Automattic, Inc.
*/
body {
    font-size: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #777;
    font-weight: 400;
}
a {
    text-decoration: none ;
}
::selection {
    background: #0a4266;
    color: #fff;
}
.searchbutton, #headernav a:hover, .post .date a:hover, .widget li a, 
.footer_item li a, .footer_item li, .footer-menu ul li a:hover, a:hover {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}
.post .readmore:hover {
    cursor: pointer;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70);
    opacity: .7;
}

.post .excerpt {
	font-size: 14px!important;
	line-height: 21px!important;


font-size: 15px;
color: #333;
line-height: 18px;

}

#topnav {
    width: 89.2%;
    height: 50px;
/*    border-bottom: 4px solid #d6d6d6;*/
    background: #2ba6cb;
    padding: 0 5.4%}
#topnav nav a {
    font-size: 110%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    padding: 0 1.5%;
    background: url(images/border.png) repeat-y right;
    min-height: 50px;
    float: left;
    line-height: 260%}
#topnav nav {
    width: 80%;
    float: left;
}
#topnav nav a:hover {
    color: #b8e9f0;
}

header {
    width: 89.2%;
    margin-left: 5.4%;
    height: 145px;
}
#logo {
    width: 225;
    height: 47px;
    float: left;
    margin-top: 18px;
}
#search {
    float: left;
    width: 41%;
}
#search .search {
    width: 77% ;
    background: #fff ;
    border: none;
    float: left ;
    font-weight: 300 ;
    font-size: 14px ;
    color: #a6a6a6 ;
    font-family: 'Oswald', sans-serif ;
    border-radius: 0;
}
.searchbutton {
    width: 16% ;
    display: block ;
    padding: 2.3% ;
    background: #ec4646 ;
    border: none ;
    font-size: 14px ;
    float: left ;
    color: #fff ;
    text-align: center ;
    text-transform: uppercase ;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) ;
    font-family: 'Oswald', sans-serif ;
    border-radius: 0 0 0 0 ;
    box-shadow: none ;
    margin-top: 1px;
    height: 44px;
    margin-left: 1px;
}
.searchbutton:hover {
    background: #fa6649 ;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) ;
    cursor: pointer ;
}

#searchform #searchsubmit {
    width: 20% ;
    display: block ;
    background: #cccccc ;
    border: 1px solid #cccccc ;
    font-size: 14px ;
    float: left ;
    color: #fff ;
    text-align: center ;
    text-transform: uppercase ;
    font-family: 'Oswald', sans-serif ;
    border-radius: 0 0 0 0 ;
    box-shadow: none ;
}

#searchform #searchsubmit:hover {
    background: #fa6649 ;
    cursor: pointer ;
}

#searchform #s {
    margin-right: 10px;
    height: 36px;
    width: 70%;
    margin-top: 1px;
    margin-left: 1px;
}

#headernav {
    width: 89.2% ;
    min-height: 46px ;
    background: #fff ;
    margin: 0 auto ;
    overflow: hidden ;
}

#headernav a:hover {
    color: #616161 ;
}
#wrap {
    width: 83.2%;
    height: auto;
    padding: 3%;
    background: #fff;
    margin: 0 auto;
    margin-top: 5px;
    overflow: hidden;
}
#content {
    width: 70%;
    height: auto;
    display: block;
    float: left;
    margin-right: 3%;
    border-right: 1px solid #d9d9d9;
}
#content-fullwidth {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    margin-right: 2%;
    margin-left:2%;
}
.post {
    width: 95%;
    min-height: 225px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    overflow: hidden;
    position: relative;
border-bottom: 1px solid #D9D9D9;	
}

.post .image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    margin-bottom: 15px;
}
.post .image img {
    width: 100%}
.post .date {
    width: 70%;
    float: left;
    font-size: 14px;
    text-transform: uppercase;
    color: #777;
}
.post .date a {
    text-transform: capitalize;
}
.post .author {
    width: 30%;
    float: right;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    color: #777;
}
.post .author span {
    font-weight: 300;
}
.post .title {
    width: 100%;
    margin: 15px 0;
    padding-bottom: 15px;
    line-height: 0px;
    font-weight: bold;
}
.post .title a, .post .title {
    font-size: 22px;
    color: #333;
}
.post .title a:hover {
    color: #1c6fa4;
}
.post .content {
    font-size: 157x ;
    line-height: 21px ;
    color: #222 ;
    display: block ;
    line-height: 18px ;
    width: 100% ;
}
.post .content p {
    color: #333;
    margin-bottom: 15px;
}
.post .content img {
    float: left;
    margin: 0 10px 10px 0;
}
.wp-post-image {
	float:left!important;
	padding-right:5px;
	width:218px;
	height:138px;
}
.post .content h1 {
    font-size: 26px;
}
.post .content h2 {
    font-size: 20px;
}
.post .content h3 {
    font-size: 18px;
}
.post .content h4 {
    font-size: 14px;
}
.post .content h5 {
    font-size: 12px;
}
.post .content h6 {
    font-size: 10px;
}
.post .content a {
    color: #062438;
}
.post .content a:hover {
    color: #ec4646;
}
.post .content table {
    border: 1px solid #ccc;
}
.post .content td {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: 5px;
}
.post .content ul, .post .content li, .post .content ol {
    margin-left: 10px;
}
.post .content blockquote {
    color: #777;
    margin-left: 15px;
}
.post .readmore {
    width: 16%;
    padding: 1.3%;
    background: #2ba6cb url(images/readmore.png) no-repeat right center;
    margin-top: 4%;
    font-size: 14px;
    color: #fff ;
    text-transform: uppercase;
    right: 0 ;
    bottom: 0 ;
    position: absolute;
    border-left: 8px solid #fff;
}
.post .readmore a {
    display: block;
    color: #fff ;
}
.fb-comments, .fb-comments span, .fb-comments iframe {
    width: 100% ;
}
.pagination {
    width: 100%;
    padding: 20px 0;
}
.pagination a, .pagination span, .pagination .current {
    font-size: 14px;
    padding: 3px 5px;
    color: #2ba6cb;
    float: left;
    margin-right: 10px;
}
.pagination .prev a, .pagination .next a {
    float: left;
    color: #fff;
    padding: 5px 10px;
    font-weight: 300;
    font-size: 12px;
    background: #2ba6cb;
}
.pagination a:hover, .pagination .current {
    color: #ec4646;
    cursor: pointer;
}
.pagination .prev a:hover, .pagination .next a:hover {
    background: #373d40;
    color: #fff;
}
#sidebar {
    width: 26.5%;
    height: auto;
    float: left;
}
.widget {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 20px;
}
.widget .stitle {
    width: 100%;
    height: auto;
    display: block;
    font-size: 18px;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 15px;
}
.widget ul {
    width: 100%;
    list-style: none;
}
.widget li {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #d9d9d9;
    padding: 15px 0 15px 0;
}
.widget li:hover {
    border-bottom: 1px solid #b8b8b8;
}
.widget li a:hover {
    padding-left: 5%;
    width: 95%;
    color: #ec4646;
    cursor: pointer;
}
.widget li a {
    font-family: Arial, sans-serif;
    font-size: 14px;
    display: block;
    width: 100%;
    height: 100%}
.tagcloud a:hover {
    color: #ec4646;
}
.widget li a:hover {
    color: #ec4646;
}
.widget p, .rssSummary, .textwidget {
    width: 100%;
    font-size: 12px;
    font-family: Arial, sans-serif;
    margin-top: 15px;
    line-height: 22px;
}
footer {
    width: 100%;
    min-height: 110px;
    background: #242a2e;
    border-top: 5px solid #373d40;
    margin-top: 45px;
    overflow: hidden;
}
.footer_item {
    width: 30%;
    min-height: 80%;
    margin-right: 5%;
    float: left;
}
.footer_item:last-of-type {
    margin-right: 0 ;
}
#footer_center {
    width: 89.2%;
    margin: 20px auto;
    color: #505558;
}
.footer_logo, .footer_contact {
    width: 100%;
    overflow: hidden;
}
.footer_contact .call {
    width: 40%;
    height: auto;
    float: left;
}
.footer_contact .email {
    width: 55%;
    height: auto;
    margin-left: 4%;
    float: left;
}
.footer_contact .email span, .footer_contact .call span {
    color: #747f87;
    font-weight: 300;
}
.footer_contact .email, .footer_contact .call {
    color: #c5c5c5;
    font-weight: 400;
    font-size: 20px;
    margin-top: 10px;
}
.copyright {
    width: 100%;
    color: #505558;
    font-family: Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    line-height: 0px;
}

.footer-name {
    text-align: center;
}

.footer-menu {
    width: 100%;
}

.footer-menu ul {
    display: block;
    text-align: center;
}

.footer-menu ul li {
    display: inline;
    padding: 10px;
    list-style: none;
    text-align: center;
    padding: 10px 20px;
}

.footer-menu ul li a, .footer-name a {
    color: #AFAAAA;
}

.footer-menu ul li a:hover, .footer-name a:hover {
    color: #ffffff;
} 

.footer_item .rowtitle {
    width: 100%;
    font-size: 20px;
    color: #c5c5c5;
    padding-bottom: 20px;
}
.footer_item ul {
    list-style: none;
    width: 100%}
.footer_item li {
    width: 100%;
    border-bottom: 1px solid #3a4043;
}
.footer_item li a {
    width: 100%;
    color: #5f6b79;
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 0 10px 0;
    display: block;
}
.footer_item li:hover {
    border-bottom: 1px solid #474e51;
}
.footer_item li a:hover {
    padding: 10px 0 10px 3%;
    width: 97%;
    color: #ec4646;
}
.footer_item li:last-of-type {
    border: 0;
}
.archivetitle {
    width: 95%;
    font-size: 18px;
    color: #2ba6cb;
    border-bottom: 1px solid #ccc;
    margin-bottom: 16px;
    height: 26px;
    padding: 0 0 10px 0;
    line-height: 26px;
}
#comments {
    width: 100%;
    margin-top: 15px;
    font-size: 14px;
}
#comments a:hover {
    color: #444;
}
#commentsform {
    width: 100% ;
    overflow: hidden ;
}
.commentsheadline {
    width: 100% ;
    font-size: 18px ;
}
.commentsheadline a {
    font-family: 'Oswald', sans-serif ;
    color: #777 ;
    font-weight: 400 ;
}
#commentsform textarea {
    width: 50%;
    height: 159px;
    border: 1px solid #ccc;
    float: left;
    margin-top: 10px;
	margin-bottom:20px;
}
#commentsform .fields {
    width: 45% ;
    margin-left: 4% ;
    margin-top: 10px ;
    float: right ;
}
#commentsform .fields input {
    width: 50% ;
    border: 1px solid #ccc ;
    padding: 7px ;
    margin: 0 10px 14px 0 ;
}
#commentsform .fields input:focus, #commentsform textarea:focus {
    border: 1px solid #2ba6cb ;
}
textarea:focus, input:focus {
    outline: 0 ;
}
#commentsform .submitbutton {
    width: 98% ;
    height: 40px ;
    line-height: 10px ;
    background: #2ba6cb ;
    color: #fff ;
    font-size: 16px ;
    text-align: center ;
    border-radius: 0 ;
    border: none ;
    box-shadow: none ;
    text-shadow: none ;
}
#commentsform .submitbutton:hover {
    background: #4fbada ;
    cursor: pointer ;
}
.comment {
    width: 95%;
    height: auto;
    margin-top: 15px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 15px;
    color: #666;
}
.commenttitle {
    width: 100%;
    margin-bottom: 8px;
    font-style: normal ;
}
.commenttitle a {
    color: inherit ;
}
.commenttitle span {
    font-weight: 300;
}
.comment p {
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.widget-title {
    font-size: 18px ;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 15px;
    color: #777 ;
}
.widget li a {
    display: inline ;
}
.widget ul, ol {
    margin: 0 0 0 0 ;
}
.widget li a {
    color: inherit ;
}
.widget li a:hover {
    color: #ec4646 ;
}
.widget select {
    float: left ;
    font-family: Arial, sans-serif ;
    font-size: 14px ;
    font-weight: 300 ;
    padding: 2.5% ;
    width: 77% ;
    margin-top: 15px ;
    width: 500px ;
}
.widget select option {
    max-width: 500px ;
}
.widget input {
    float: left ;
    font-family: Arial, sans-serif ;
    font-size: 14px ;
    font-weight: 300 ;
    padding: 2.5% ;
    width: 77% ;
    margin-top: 15px ;
}
#today a {
    color: #ec4646 ;
}
#prev a {
    color: #ec4646 ;
}
#next a {
    color: #ec4646 ;
    float: right ;
}
#commentform #submit {
    width: 19% ;
    line-height: 5px ;
    background: #2ba6cb ;
    color: #fff ;
    font-size: 16px ;
    text-align: center ;
    border-radius: 0 ;
    border: none ;
    box-shadow: none ;
    text-shadow: none ;
    padding: 1.5% ;
}
.comment {
    list-style: none ;
}
#comments ul {
    margin: 0 0 10px 25px!important;
}
#reply-title {
    display: none ;
}
.wp-pagenavi a:visited {
    color: #2ba6cb ;
}
.wp-paginate .current {
    color: red ;
    background: #fff ;
    border: 1px solid black ;
    margin-right: 4px;
    padding: 3px 6px;
}
.wp-paginate a {
    background: #fff ;
    border: 1px solid #ccc;
    color: #2ba6cb ;
    margin-right: 4px;
    padding: 3px 6px;
    text-align: center;
    text-decoration: none;
}
.wp-paginate .title {
    color: #2ba6cb ;
    margin-right: 4px;
}
.depth-2 {
	padding-left:20px;
}

.depth-3 {
	padding-left:30px;
}

.depth-4 {
	padding-left:40px;
}

.depth-5 {
	padding-left:50px;
}

.depth-6 {
	padding-left:60px;
}



.footer_item .widget .widgettitle {
    width: 100% ;
    font-size: 20px ;
    color: #c5c5c5 ;
    padding-bottom: 20px ;
}

#socialmedia ul.nav2 li {
    line-height: 48px !important;
}

.current-menu-item a {
    color: #b8e9f0 !important;
}

#search-2 {
	display: none;
}

.navbar .nav > li > a {
	background: none !important;
}

.footer-name {
    font-size: 20px;
}

#respon_socialmedia {
    padding-top: 1px;
}

#respon_socialmedia a {
    float: right;
    margin-right: 1px;
    width: 48px;
    height: 44px;
}

.fb-flat-icon {
    background: url(images/socialmedia-flat.png) no-repeat -75px -153px;
}

.gplus-flat-icon {
    background: url(images/socialmedia-flat.png) no-repeat -150px -150px;
}

.twitter-flat-icon {
    background: url(images/socialmedia-flat.png) no-repeat -457px -152px;
}

/*-[ Author Box ]---------------------------*/
.postauthor p {
    padding-top: 0px;
    font-size: 14px;
    margin-bottom: 0;
    line-height: 20px;
}
.postauthor-top span {
    font-size: 14px;
    line-height: 1.5;
    display: block;
    font-weight: bold;
    text-transform: uppercase;
}
.postauthor-top .thetime {
    font-weight: normal;
    font-size: 12px;
    color: #999;
    display: inline-block;
    text-transform: none;
    line-height: 1;
}
.postauthor {
    min-height: 125px;
    float: left;
    clear: both;
    padding: 15px 2.4% 0 2.4%;
    background: #EEEEEE;
    border: 1px solid #E1E1E1;
    width: 100%;
}

.postauthor h4 {
    font-weight: bold;
    font-size: 18px;
}
.postauthor h5 {
    display: inline-block;
    text-transform: capitalize;
    font-size: 18px;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}
.postauthor img {
    float: left;
    margin: 5px 20px 15px 0;
}
.postauthor h4 a { color: #473636 }

.postauthor-container {
    clear: both;
    float: left;
    width: 90%;
}
.postauthor-container h4 {
    margin-bottom: 10px;
    font-size: 18px;
}


/*-[Comments]--------------*/
.total-comments {
    font-size: 18px;
    line-height: 32px;
    color: #343434;
    font-weight: bold;
    text-transform: uppercase;
}
.cnumber { color: #2DB2EB }
#comments {
    padding: 0;
    background-color: transparent;
    margin-top: 25px;
    float: left;
    clear: both;
    width: 100%;
}
#commentsAdd {
    background-color: transparent;
    width: 100%;
    float: left;
    clear: both;
    margin-bottom: 20px;
}
#comments .avatar {
    float: left;
    margin-right: 20px;
    width: 11.3%;
}
.comment time {
    border-left: 1px solid #B3B3B3;
    margin-left: 5px;
    padding-left: 12px;
    color: #939291;
    font-size: 13px;
}
ul.children .commentImageLeft {
    width: 60px;
    height: 90px;
    border-left: 1px solid #c1bbb6;
    border-bottom: 1px solid #c1bbb6;
    position: absolute;
    top: -50px;
    left: -70px;
}
input.text-input, #commentform input { padding: 10px }
input#author, input#email, input#url {
    width: 360px;
    border: 1px solid #E1E1E1;
    background: #fff;
    font-size: 14px;
    display: block;
    max-width: 85%;
    float: right;
    padding: 10px 2%;
}
input#author, input#email, input#url, #comment {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.contactform input[type="text"] { width: 380px }
#cancel-comment-reply-link {
    float: right;
    line-height: 24px;
    margin-top: 0;
}
.contact-submit, #cancel-comment-reply-link {
    color: red;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: -25px;
    text-decoration: underline;
    z-index: 100;
    position: relative;
}
#commentform {
    border: 1px solid #E1E1E1;
    overflow: hidden;
    padding: 10px 5%;
    width: 89.6%;
    background: #EEEEEE;
}
#commentform input#submit {
    line-height: 1;
    background-color: #38B7EE;
    padding: 12px 15px 11px;
    color: #fff;
    text-decoration: none;
    float: right;
    cursor: pointer;
    display: inline-block;
    border: 0;
    font-size: 16px;
    font-weight: 700;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
    text-transform: uppercase;
    font-family: inherit;
}
#commentform input#submit:hover {
    color: #fff;
    background: #2a2a2a;
}
ol.commentlist {
    margin-left: 0;
    overflow: hidden;
}
.commentlist li {
    list-style: none;
    margin: 0 0 20px 0;
    padding-left: 0;
    float: left;
    width: 100%;
}
.commentlist p { margin-bottom: 1em }
.commentlist p:last-child { margin-bottom: 0 }
.comment-author { position: relative }
.comment-author:before {
    border-color: rgba(0, 0, 0, 0) #D2D2D2 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 0 14px 15px 15px;
    bottom: 21px;
    content: " ";
    left: 10.8%;
    position: absolute;
}
.comment-author:after {
    border-color: rgba(0, 0, 0, 0) #F7F5F6 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 0 12px 14px 15px;
    bottom: 21px;
    content: " ";
    left: 11.2%;
    position: absolute;
}
.fn {
    color: #939291;
    font-size: 13px;
    line-height: 1.375em;
}
.fn a { color: #939291 }
.comment-meta {
    font-size: 12px;
    font-style: italic;
}
.comment-meta a { color: #888 }
.commentmetadata {
    overflow: hidden;
    padding: 12px;
}
.commentmetadata ul, .commentmetadata ol, .commentmetadata ul ol, .commentmetadata ol ul { margin-top: 0 }
.commentmetadata li {
    border: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 5px;
    list-style: square;
}
.commentmetadata ol li { list-style: decimal }
.comment-metadata {
    background: #F7F5F6;
    border-bottom: 0;
    overflow: hidden;
    padding: 15px 12px;
    position: relative;
}
.reply { float: right }
.reply a {
    float: right;
    font-size: 13px;
    line-height: 22px;
}
.commentlist .children {
    margin-left: 17%;
    margin-bottom: 0;
    margin-top: 0;
    float: left;
    width: 83%;
}
.commentlist .children li { }
.avatar { float: left }
#respond h3 { margin: 0 }
.comment-respond { margin-top: 30px }
#respond h4 {
    font-size: 18px;
    line-height: 32px;
    color: #343434;
    font-weight: bold;
    border-bottom: 1px solid #D8D7D7;
    margin-bottom: 25px;
}
.cancel-comment-reply a {
    float: right;
    margin-top: -8px;
    font-size: 14px;
}
.comment-awaiting-moderation {
    font-style: italic;
    font-weight: bold;
}
/*-[ Comment Form ]----------------------------*/
#commentform textarea {
    width: 360px;
    border: 1px solid #E1E1E1;
    background: #fff;
    font-size: 14px;
    padding: 2%;
    line-height: 25px;
    font-family: inherit;
    float: right;
    max-width: 85%;
}
#commentform p {
    margin-bottom: 15px;
    float: left;
    width: 100%;
    clear: both;
}
#commentform p label {
    display: inline-block;
    margin-bottom: 2px;
    padding-bottom: 5px;
    padding-top: 5px;
    float: left;
}
.required {
    color: #a8a8a8;
    font-size: 16px;
    font-style: italic;
    padding: 0;
    line-height: 1;
}
.comment-notes .required {
    padding-left: 0;
    padding-top: 3px;
}
.comment-notes, .logged-in-as { margin-top: 15PX }
.comment-form-left {
    float: left;
    width: 50%;
}
.comment-form-right {
    float: right;
    width: 50%;
}

.seperator-line {
    float: left;
    line-height: 5px;
    clear: both;
}
